<template>
  <div>
    <el-dialog

      :modal="false"
      title="拍摄照片"
      class="gl_dialog_TitleLine gl_dl_footer"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="532px"
      top="15vh"
    >
      <div v-loading="tableLoading" style="width:100%;height:100%">

        <video v-if="!flag" id="videoCamera" width="500" height="250" autoplay />
        <el-row v-else style="height:260px">
          <el-col :span="24" align="center">
            <div class="photo_pai">
              <img :src="imgSrc" alt="" class="tx_img">
            </div>
          </el-col>
        </el-row>
        <el-row v-if="resphoto" style="margin-bottom:10px">
          <p>学员姓名：</p>
          <el-col :span="24" align="center">
            <div class="relase_photo">
              <div v-for="(item, index) in tablelist" :key="index" style="margin-right:10px">
                <img :src="item.faceUrl" alt="" class="tx_img">
                <div>
                  <el-radio v-model="radio" :label="item.student">{{ item.student.name }}</el-radio>
                </div>
              </div>

            </div>
          </el-col>
        </el-row>

        <canvas id="canvasCamera" style="display:none;" width="300" height="300" />

      </div>
      <span v-if="!resphoto" slot="footer" class="dialog-footer">
        <el-button :loading="tableLoading" @click="stopNavigator()">关闭摄像头</el-button>
        <el-button :loading="tableLoading" @click="setImage()">拍照</el-button>
      </span>
      <span v-else slot="footer" class="dialog-footer">
        <el-button :loading="tableLoading" @click="reset()">重新拍照</el-button>
        <el-button :loading="tableLoading" @click="toClass()">签到</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import { api_POST_ClubFaceSearch } from '@/extend/api/hallswaggerApi/app.js';
import { SearchFacesInput } from '@/lib/form/hall/swaggerForm';
// import { api_Post_UploadFileAddHeader } from '@/extend/api/file';
export default {
  data() {
    return {
      radio: {},
      tableLoading: false,
      SearchFacesInput: new SearchFacesInput(),
      flag: false,
      resphoto: false,
      dialogVisible: false,
      imgSrc: '',
      importAction: `${WEB_CONFIG.VUE_APP_STATIC_FILE_RUL}/api/upload/image`,
      tablelist: []
    };
  },
  watch: {
    dialogVisible: {
      handler(flag) {
        if (!flag) {
          this.flag = false;
          this.resphoto = false;
          this.radio = {};
          this.$parent.thisVideo.srcObject.getTracks()[0].stop();
        }
      }
    }
  },
  methods: {
    submitImg() {},
    //  绘制图片（拍照功能）
    setImage () {
      this.tableLoading = true;
      var _this = this;
      // 点击，canvas画图
      _this.$parent.thisContext.drawImage(_this.$parent.thisVideo, 0, 0, 300, 300);
      // 获取图片base64链接
      var image = this.$parent.thisCancas.toDataURL('image/png');
      _this.imgSrc = image;
      console.log(_this.imgSrc);
      const file = this.dataURLtoFile(_this.imgSrc, 'xue.png');
      console.log(file);
      this.flag = true;
      this.SearchFacesInput.includeCourses = true;
      this.SearchFacesInput.base64Image = _this.imgSrc.split('data:image/png;base64,')[1];
      this.SearchFacesInput.limit = 2;
      api_POST_ClubFaceSearch(this.SearchFacesInput).then(res => {
        if (res.items.length === 0) {
          this.$message({
            message: '没有匹配到学员，请重新拍照',
            type: 'warning'
          });
          this.tableLoading = false;
          this.reset();
          return;
        }
        this.resphoto = true;
        this.tableLoading = false;
        this.tablelist = res.items;
        this.radio = res.items[0].student;
      }, error => {
        this.tableLoading = false;
        this.resphoto = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // base64转文件
    dataURLtoFile (dataurl, filename) {
      var arr = dataurl.split(',');
      var mime = arr[0].match(/:(.*?);/)[1];
      var bstr = atob(arr[1]);
      var n = bstr.length;
      var u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    // 关闭摄像头
    stopNavigator () {
      this.flag = false;
      this.dialogVisible = false;
      this.$parent.thisVideo.srcObject.getTracks()[0].stop();
    },
    // 重新拍照
    reset() {
      this.flag = false;
      this.resphoto = false;
      this.radio = {};
      this.$parent.thisVideo.srcObject.getTracks()[0].stop();
      this.$parent.openphoto();
    },
    // 签到
    toClass() {
      if (this.radio.id === undefined) {
        this.$message({
          message: '请选择学员',
          type: 'warning'
        });
        return;
      }
      const _json = {};
      _json.studentId = this.radio.id;
      _json.courseScheduleId = this.$route.query.CourseScheduleId;
      this.$parent.photoclass(_json);
    }
  }
};
</script>

<style scoped lang="scss">
.photo_pai, .photo_pai::before, .photo_pai::after {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }

        .photo_pai {
          width: 201px;
          height: 201px;
          margin: auto;
        }
        .photo_pai::before, .photo_pai::after {
          content: '';
          z-index: 6;
          margin: -2%;
          box-shadow: inset 0 0 0 5px #1cb7e596;
          // box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0,0,0,0.2), 0 16px 0 -6px #f6f6f6, 0 17px 1px -6px rgba(0,0,0,0.2);
          animation: clipMe 8s linear infinite;
        }
        .photo_pai::before {
          // color: #2be991b8;
          animation-delay: -4s;
        }
        .photo_pai:hover::after, .photo_pai:hover::before {
          background-color: rgba(255, 0, 0, 0.3);
        }

        @keyframes clipMe {
          0%, 100% {
            clip: rect(0px, 220.0px, 2px, 0px);
          }
          25% {
            clip: rect(0px, 2px, 220.0px, 0px);
          }
          50% {
            clip: rect(218.0px, 220.0px, 220.0px, 0px);
          }
          75% {
            clip: rect(0px, 220.0px, 220.0px, 218.0px);
          }
        }
        .tx_img {
          width: 100%;
          height: 100%;
          box-shadow:0 0 10px #1587f1;
        }
.relase_photo{
  display: flex;
  justify-content: center;

}
.relase_photo>div{
   width: 101px;
          height: 101px;
}
</style>
